<template>
  <view class="settings-page">
    <!-- 设置选项列表 -->
    <view class="settings-list">
      <view class="setting-item" @click="goToChangePhone">
        <text class="setting-text">更改手机号</text>
        <image class="arrow-icon" src="/static/arrow-icon.png" mode="aspectFit"></image>
      </view>
      
      <view class="setting-item" @click="goToChangePassword">
        <text class="setting-text">更改密码</text>
        <image class="arrow-icon" src="/static/arrow-icon.png" mode="aspectFit"></image>
      </view>
      
      <view class="setting-item" @click="goToPrivacyAgreement">
        <text class="setting-text">用户隐私协议</text>
        <image class="arrow-icon" src="/static/arrow-icon.png" mode="aspectFit"></image>
      </view>
      
      <view class="setting-item" @click="goToServiceAgreement">
        <text class="setting-text">用户服务协议</text>
        <image class="arrow-icon" src="/static/arrow-icon.png" mode="aspectFit"></image>
      </view>
      
      <view class="setting-item" @click="goToAccountDeletion">
        <text class="setting-text">注销账号</text>
        <image class="arrow-icon" src="/static/arrow-icon.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <view class="logout-btn" @click="handleLogout">
        <text class="logout-text">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import sheep from '@/sheep';
import { computed } from 'vue';
import AuthUtil from '@/sheep/api/member/auth';

const appInfo = computed(() => sheep.$store('app').info);
const isLogin = computed(() => sheep.$store('user').isLogin);

// 跳转到更改手机号页面
const goToChangePhone = () => {
  uni.navigateTo({
    url: '/pages/user/change-mobile'
  })
}

// 跳转到更改密码页面
const goToChangePassword = () => {
  uni.navigateTo({
    url: '/pages/user/change-password'
  })
}

// 跳转到用户隐私协议页面
const goToPrivacyAgreement = () => {
  uni.navigateTo({ 
    url: '/pages/index/agreement?id=2'
  });
}

// 跳转到用户服务协议页面
const goToServiceAgreement = () => {
  uni.navigateTo({ 
    url: '/pages/index/agreement?id=1'
  });
}

// 跳转到注销账号页面
const goToAccountDeletion = () => {
  uni.showModal({
    title: '提示',
    content: '确认注销账号？',
    success: async function (res) {
      if (!res.confirm) {
        return;
      }
      const { code } = await AuthUtil.logout();
      if (code !== 0) {
        return;
      }
        sheep.$store('user').logout();
        uni.reLaunch({ url: '/pages/index/login' });
    },
  });
}

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async function (res) {
      if (!res.confirm) {
        return;
      }
      const { code } = await AuthUtil.logout();
      if (code !== 0) {
        return;
      }
        sheep.$store('user').logout();
        uni.reLaunch({ url: '/pages/index/login' });
    },
  })
}
</script>

<style lang="scss" scoped>
.settings-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 500rpx; /* 为底部固定按钮留出空间 */
}

.settings-list {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 30rpx;
    position: relative;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 30rpx;
      right: 30rpx;
      height: 1rpx;
      background-color: #f5f5f5;
    }
    
    .setting-text {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }
    
    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.logout-section {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  padding: 40rpx 20rpx;
  background: #f8f9fa;
  
  .logout-btn {
    background: linear-gradient(90deg, #B276FF 0%, #74A7FF 100%);
    border-radius: 50rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .logout-text {
      font-size: 32rpx;
      color: #fff;
      font-weight: 600;
    }
  }
}
</style>